import { Meta, Canvas, Story, Source } from '@storybook/blocks';
import { sourceDocs } from '../molecules/counter/counter.utils';
import * as CounterStories from '../molecules/counter/counter.stories';

<Meta title="Guidelines/Accessibility" />

For inspiration, check out [Salesforce's Lightning Design System accessibility guidelines](https://www.lightningdesignsystem.com/guidelines/accessibility/), and be sure to check out the fantastic [a11yproject](http://a11yproject.com) for an accessibility checklist, patterns, and resources.

## Icons

### Decorative

// TODO: add decaroative example with `aria-hidden="true"`.

### Actionable

Actionable icons (ie wrapped in a button), are labelled.
`aria-label=""` is used on the wrapped button selector.

#### Stories example

<Canvas>
  <Story of={CounterStories.LikeCounter}></Story>
  <Story of={CounterStories.LikeCounterActive}></Story>
</Canvas>

#### Code example

<Source {...sourceDocs().docs.source} />
